<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>Book Manage System </title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        .icon {
            position: absolute;
            right: 20px;
            width: 3em;
            height: 3em;
            vertical-align: -0.15em;
            fill: currentColor;

            overflow: hidden;
        }

        nav {
            font-size: 1.5rem;
            background-color: #21D4FD;
            background-image: -webkit-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -moz-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -o-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
        }

        h1 {
            font-size: 3rem;
        }

        p {
            font-size: 18px;
            margin-bottom: 0px;
        }

        li {
            margin: 10px 20px;

        }

        body {
            /*             background-image: url("../static/img/2.jpg"); */
            background-size: cover;
        }


        .card-header {
            height: 100px;
            display: flex;
            justify-content: left;
            align-items: center;

        }

        .card-body {
            height: 70px;
            /*padding: 0px;*/
            padding-left: 10px;
            display: flex;
            justify-content: left;
            align-items: center;
        }

        .dashBoard {
            position: relative;
            width: 100%;
            height: 240px;
            box-shadow: 8px 8px 4px #888881;
            border-radius: 10px;
            background: rgb(0, 27, 36);
            background: linear-gradient(90deg, rgba(0, 27, 36, 0.5489105310092788) 0%, rgba(9, 112, 121, 0.5180982060793067) 45%, rgba(0, 212, 255, 0.21837831812412467) 95%);
            display: flex;
            /*justify-content: flex-end;*/
            align-items: center;
        }

        #timeBox {
            margin-right: 20px;
            width: 200px;
            height: 200px;
            position: absolute;
            right: 30px;
            display: flex;
            flex-flow: column;
            justify-content: center;
        }

        .person {
            margin: 40px;
            align-self: flex-start;
            justify-self: center;
            align-self: center;
        }

        .notification {
            font-size: 25px;
            inline-height: 20px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">

    <ul class="navbar-nav" sec:authorize="hasRole('USER')">
        <li>
            <h1><a th:href="@{/}" style="color: white; text-decoration: none">Book Manage System</a></h1>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/user/book/getAll}">Book List</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/user/record/getOwnRecord}">Borrow Record</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/user/reserve/getAll}">Reserve Record</a>
        </li>
    </ul>
    <div class="text-white" style="font-size: medium; position: absolute; bottom: 30px; right: 40px">
        <div class="dropdown">
            <a class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
               aria-expanded="false"
               th:text="${session.username}+', Hello'">
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" th:href="@{/user/toInfoPage}" sec:authorize="hasRole('USER')">Person
                    Information</a>
                <a class="dropdown-item" th:href="@{/toChPwdPage}">Modify Password</a>
                <a class="dropdown-item" th:href="@{/logout}">Logout</a>
            </div>
        </div>
    </div>
</nav>

<!--<div class="alert alert-warning alert-dismissible fade show" role="alert">-->
<!--    <strong>Holy guacamole!</strong> You should check in on some of those fields below.-->
<!--    <button type="button" class="close" data-dismiss="alert" aria-label="Close">-->
<!--        <span aria-hidden="true">&times;</span>-->
<!--    </button>-->
<!--</div>-->
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
    <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
        <div class="toast-header">
            <strong class="mr-auto">Return Notify</strong>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body" th:each="re,iterStat : ${records}">
            <p th:text="'Return 《'+ ${re.getBookName()} +'》' + '('+${re.getBookId()}+') successfully'"></p>
        </div>

    </div>
</div>
<div class="container">
    <div th:each="record : ${records}">
        <!--/*@thymesVar id="getBook_name" type="com.xkx.bookmanager.pojo.Book"*/-->
        <p th:text="'bookId 为' + ${record.getBookId()} + ' ， 书名为 ' + ${record.getBookName()} + ' 的图书还书成功！！！'"></p>

<!--        <td th:text="${book.getPublisher()}"></td>-->
<!--        <td th:text="${book.getIsbn()}"></td>-->
<!--        <td th:text="${book.getPrice()}"></td>-->
<!--        <td><a th:href="@{'/user/book/info/' + ${book.getIsbn()}}" class="btn btn-outline-success">Details</a></td>-->
    </div>
    <div class="row" style="margin-bottom: 30px;margin-top: 60px">
        <div class="col-sm">
            <div class="card bg-light" style="margin: 10px 10px; width: 230px;box-shadow: 8px 8px 4px #888888;">
                <div class="card-header">
                    <h1 th:text="${borrowedBooks}"></h1>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-book2"></use>
                    </svg>
                </div>
                <div class="card-body">
                    <p>
                        Current Borrowed books
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm">
            <div class="card bg-light" style="margin: 10px 10px; width: 230px;box-shadow: 8px 8px 4px #888888;">
                <div class="card-header">
                    <h1 th:text="${returnBooks}"></h1>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-books"></use>
                    </svg>
                </div>
                <div class="card-body">
                    <p>
                        Last Return Books
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm">
            <div class="card bg-light" style="margin: 10px 10px; width: 230px;box-shadow: 8px 8px 4px #888888;">
                <div class="card-header">
                    <h1 th:text="${sumFine}"></h1>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-book"></use>
                    </svg>
                </div>
                <div class="card-body">
                    <p>
                        Fine Amount (total)
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm">
            <div class="card bg-light" style="margin: 10px 10px; width: 230px;box-shadow: 8px 8px 4px #888888;">
                <div class="card-header">
                    <h1 th:text="${reserveSuccess}"></h1>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dictionary-fill"></use>
                    </svg>
                </div>
                <div class="card-body">
                    <p>
                        Reserve Status
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-bottom: 30px;margin-top: 10px">
        <div class="dashBoard">
            <div class="person">
                <h1 style="font-size: 1.5rem">Dear</h1>
                <h1 th:text="${session.name}" style="font-size: 1.5rem"></h1>
            </div>
            <div>
                <p class="notification" th:text="'You have '+ ${borrowedBooks} + ' books to return'"></p>
                <p class="notification"
                   th:text="'You have reserved ' +${reserveTotal} +' books, and '+ ${reserveFail} +' are expired' "></p>
                <p class="notification" th:text="'You have paid ' + ${paidFine} +' yuan because of delay penalty'"></p>
                <p class="notification" th:text="'you have '+ ${sumFine} + ' yuan to pay because of delay panelty'"></p>

            </div>
            <div id="timeBox"><h1 style="text-align: center; font-size: 2rem">Current Time</h1>
                <div id="nowDateTimeYear" style="text-align: center;font-size: 1.3rem"></div>
                <div id="nowDateTimeDay" style="text-align: center;font-size: 1.4rem"></div>
                <div id="nowDateTime" style="text-align: center;font-size: 1.5rem"></div>
            </div>
        </div>
    </div>
</div>
</div>

<script th:inline="javascript">
    window.onload = function () {
        $('#liveToast').toast('show')
        startTime();
    }

    function startTime() {
        let today = new Date();//定义日期对象
        let yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年
        let MM = today.getMonth() + 1;//通过日期对象的getMonth()方法返回年
        let dd = today.getDate();//通过日期对象的getDate()方法返回年
        let hh = today.getHours();//通过日期对象的getHours方法返回小时
        let mm = today.getMinutes();//通过日期对象的getMinutes方法返回分钟
        let ss = today.getSeconds();//通过日期对象的getSeconds方法返回秒
        // 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
        MM = checkTime(MM);
        dd = checkTime(dd);
        mm = checkTime(mm);
        ss = checkTime(ss);
        let day; //用于保存星期（getDay()方法得到星期编号）
        if (today.getDay() == 0) day = "Sunday"
        if (today.getDay() == 1) day = "Monday"
        if (today.getDay() == 2) day = "Tuesday"
        if (today.getDay() == 3) day = "Wednesday"
        if (today.getDay() == 4) day = "Thursday"
        if (today.getDay() == 5) day = "Friday"
        if (today.getDay() == 6) day = "Saturday"
        document.getElementById('nowDateTimeYear').innerHTML = yyyy + "-" + MM + "-" + dd;
        document.getElementById('nowDateTimeDay').innerHTML = day;
        document.getElementById('nowDateTime').innerHTML = hh + " : " + mm + " : " + ss;
        setTimeout('startTime()', 1000);//每一秒中重新加载startTime()方法
    }

    function checkTime(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
</script>

<script th:src="@{icon/iconfont.js}"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>